<template>
  <div>
    <!-- 添加或修改部门对话框 -->
    <el-dialog v-if="open" title="修改" :visible.sync="open" width="880px" class="dia-style">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="150px"
          label-position="left"
          @submit.native.prevent
        >
          <el-col :span="20">
            <el-form-item label="指标属性名称" prop="dictKey">
              <el-input v-model="formData.dictKey" placeholder="请输入" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="指标属性编码" prop="dictValue">
              <el-input
                v-model="formData.dictValue"
                placeholder="请输入"
                disabled
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="子集名称及代码">
              <el-button icon="el-icon-plus" size="small" style="width: 108px" @click="AddClick">添加</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form ref="tableRef" :model="{ tableForm: formData.children }">
              <el-table
                stripe
                :data="formData.children"
                :header-cell-style="{ background: '#F3F5FC' }"
                style="width: 100%"
              >
                <el-table-column type="index" label="序号" width="80" align="center" />
                <el-table-column label="名称" width="240">
                  <template slot-scope="scope">
                    <!--     :prop="scope.$index+'normalName'"
                                                    :rules="rules.addTableData.normalName"             -->
                    <el-form-item label-width="0px">
                      <el-input v-model="scope.row.dictKey" :maxlength="100" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="代码" width="240">
                  <template slot-scope="scope">
                    <el-form-item label-width="0px">
                      <el-input
                        v-model="scope.row.dictValue"
                        :disabled="Boolean(scope.row.id) "
                        :maxlength="100"
                      />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <span
                      style="color: #4b6eef;cursor: pointer;"
                      @click.stop="delClick(scope.$index)"
                    >删 除</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { editOrUpdate } from '@/api/icp/metricsDict'
import { deepClone } from '@/utils/index'

export default {
  components: {},
  props: ['editData'],
  data() {
    return {
      // 是否显示遮罩层
      open: false,

      // 表单的数据
      formData: {
        children: []
      },
      rules: {
        dictKey: [
          {
            required: true,
            message: '请输入指标属性名称',
            trigger: 'blur'
          }
        ],
        addTableData: {
          dictKey: [
            {
              required: true,
              message: '请输入指标属性名称',
              trigger: 'blur'
            }
          ],
          dictValue: [
            {
              required: true,
              message: '请输入代码',
              trigger: 'blur'
            }
          ]
        }
      },

      // parentNormal: '',
      groupId: '',
      normalId: ''
    }
  },
  computed: {},
  watch: {
    editData: {
      handler(newVal) {
        if (newVal?.id) {
          const value = deepClone(newVal)
          this.formData = value
          if (value?.id) {
            this.id = value?.id
          } else {
            this.id = 0
          }

          this.groupId = value.groupId
          // this.parentNormal = value.normalCode;
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 展示弹窗
    show() {
      this.open = true
    },
    reset() {
      this.$forceUpdate()
    },
    // 增加弹框数据
    AddClick() {
      const arr = {
        dictKey: '',
        dictValue: '',
        parentId: this.formData.id,
        groupCode: this.formData.groupStatus === 1 ? this.formData.dictValue:this.formData.groupCode,
      }
      this.formData.children.push(arr)
    },
    delClick(index) {
      this.formData.children.splice(index, 1)
    },
    handleConvertData(data) {
      return new Promise((resolve, reject) => {
        data.children.forEach((i) => {
          if (i.dictKey == '' || i.dictValue == '') {
            reject(this.$message.error('请完善子级信息后提交'))
          }
        })
        resolve(data)
      })
    },
    submitForm() {
      const query = Object.assign({}, this.formData)
      this.handleConvertData(query).then((res) => {
        editOrUpdate(res).then((res) => {
          this.$message.success('保存成功')
          this.open = false
          this.$emit('handleDialog', true)
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.$emit('handleDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 0;
}
</style>
>
